<script setup>
import { storeToRefs } from 'pinia'
import useDetailStore from '@/stores/modules/detail'

const detailStore = useDetailStore()
const { detailInfo } = storeToRefs(detailStore)
</script>

<template>
  <div class="detail-infos">
    <div class="houseName">{{ detailInfo?.mainPart?.topModule?.houseName }}</div>
    <div class="houseTags">
      <template v-for="(item, index) in detailInfo?.mainPart?.topModule?.houseTags" :key="index">
        <span
          class="tag"
          :style="{ color: item.tagText.color, backgroundColor: item.tagText.background.color }"
          v-if="item.tagText"
          >{{ item.tagText.text }}</span
        >
      </template>
    </div>
    <div class="commentBrief item">
      <div class="left left-item">
        <span class="overall">{{
          detailInfo?.mainPart?.topModule?.commentBrief?.overall.toFixed(1)
        }}</span>
        <span class="scoreTitle">
          {{ detailInfo?.mainPart?.topModule?.commentBrief?.scoreTitle }}
        </span>
        <span class="commentBrief">
          {{ detailInfo?.mainPart?.topModule?.commentBrief?.commentBrief }}
        </span>
      </div>
      <div class="right">
        <span class="totalCountStr">
          {{ detailInfo?.mainPart?.topModule?.commentBrief?.totalCountStr }}条评论
        </span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="nearByPosition item">
      <div class="left left-item">
        <span class="address">{{ detailInfo?.mainPart?.topModule?.nearByPosition?.address }}</span>
      </div>
      <div class="right">
        <span class="map"> 地图·周边 </span>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.detail-infos {
  padding: 16px;
}
.houseName {
  font-weight: 700;
  font-size: 20px;
  color: #333;
  text-align: justify;
  line-height: 24px;
  overflow: hidden;
  margin-bottom: 6px;
}
.houseTags {
  margin: 10px 0;
  .tag {
    font-size: 12px;
    margin: 0 2px;
    padding: 1px 3px;
  }
}
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin: 12px 0;
  border-radius: 5px;
  font-size: 12px;
  background-color: #f5f7fa;
}
.overall {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}
.scoreTitle {
  color: #333;
  font-weight: 700;
  margin: 0 3px;
}
.commentBrief {
  font-size: 12px;
  color: #666;
}
.totalCountStr,
.map {
  font-size: 12px;
  color: #ff9645;
}
.van-icon {
  color: #ff9645;
}
.address {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}
.left-item {
  width: 240px;
}
</style>
